<template>
  <div>
    <table border="1" width="700" style="border-collapse: collapse">
      <caption>
        购物车
      </caption>
      <thead>
        <tr>
          <th><input type="checkbox"
          v-model="isAll" /> <span >全选</span></th>
          <th>名称</th>
          <th>价格</th>
          <th>数量</th>
          <th>总价</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item,index) in goodList" :key="index">
          <td>
            <input type="checkbox"  v-model="item.checked" @click="checkedFn(index)"/>
          </td>
          <td>{{item.name }}</td>
          <td>{{item.price}}</td>
          <td>
            <button @click="btnChange(-1,item.num,index)">-</button>
            {{item.num}}
            <button @click="btnChange(1,item.num,index)">+</button>
          </td>
          <td>{{item.num*item.price}}</td>
          <td>
            <button @click="Del(index)">删除</button>
          </td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td>合计:</td>
          <td colspan="5">{{Price}}</td>
        </tr>
      </tfoot>
    </table>
  </div>
</template>

<script>
import { mapState, mapGetters } from 'vuex'

export default {
  data () {
    return {

    }
  },
  computed: {
    ...mapState('cart', ['goodList']),
    ...mapGetters('cart', ['Price']),
    isAll: {
      get () {
        return this.goodList.every((item) => item.checked === true)
      },
      set (val) {
        this.goodList.forEach((item) => {
          item.checked = val
        })
      }
    }
  },
  methods: {
    checkedFn (id) {
      this.$store.dispatch('cart/Fn', { index: id })
    },
    Del (id) {
      // console.log(id)
      this.$store.dispatch('cart/DelFn', { index: id })
    },
    btnChange (count, num, id) {
      // console.log(count)
      const newCount = num + count
      if (newCount < 0) return
      // 修改state的标准流程 组件 -> actions-> mutations->state
      this.$store.dispatch('cart/updateCount', {
        index: id,
        num: newCount

      })
    }
  }
}
</script>

<style></style>
